<template>
  <div class="home">
    <app-header></app-header>
    <app-swiper :menu="menu" :swiper="swiper"></app-swiper>

    <div class="position">
      <div class="leftBox">
        <img src="http://1.117.75.96:8080/goods/gg4.jpg" alt="" />
      </div>
      <div class="lan">
        <a @click.parent="">游戏专区</a>
        <a @click.parent="">好屏轻薄本</a>
        <a @click.parent="">ROG电竞专区</a>
      </div>
    </div>

    <div class="module1">
      <div class="box1">
        <div class="group1">
          <div class="title">
            轻薄笔记本好价热卖♥<img
              src="http://1.117.75.96:8080/goods/UI/topic.png"
              alt=""
            />
          </div>
          <div class="txt">
            购笔记本享一年意外险！600元大额券直降！指定机型加赠周边，点击抢购>>
          </div>
          <div class="tips">
            <span
              ><img src="http://1.117.75.96:8080/goods/UI/dui.png" alt="" />
              慢就赔*</span
            >
            <span
              ><img src="http://1.117.75.96:8080/goods/UI/dui.png" alt="" />
              贵就赔*</span
            >
            <span
              ><img src="http://1.117.75.96:8080/goods/UI/dui.png" alt="" />
              全面保*
            </span>
          </div>
        </div>
        <div class="group2">
          <a>
            <img src="http://1.117.75.96:8080/goods/m1-box1-1.png" alt="" />
            <p>领券中心</p>
          </a>
          <a>
            <img src="http://1.117.75.96:8080/goods/m1-box1-2.png" alt="" />
            <p>A码通道</p>
          </a>
          <a>
            <img src="http://1.117.75.96:8080/goods/m1-box1-3.png" alt="" />
            <p>直播间</p>
          </a>
          <a>
            <img src="http://1.117.75.96:8080/goods/m1-box1-4.png" alt="" />
            <p>服务与支持</p>
          </a>
          <a>
            <img src="http://1.117.75.96:8080/goods/m1-box1-5.png" alt="" />
            <p>会员福利</p>
          </a>
        </div>
        <div class="group3">
          <!-- 未登录 -->
          <div class="noLoginbox" v-if="!getToken">
            <img src="http://1.117.75.96:8080/goods/avatar.png" alt="" />
            <div class="btn">
              <router-link to="/login">登录</router-link>
              <router-link to="/reg">注册</router-link>
            </div>
          </div>
          <!-- 登录 -->
          <div class="loginbox" v-else>
            <img
              src="https://static.asus.com.cn/static/store/images/f_icon_no1.png"
              class="avatar"
              alt="FX80"
            />
            <div class="info">
              <p class="name">{{ getUser.username }}</p>
              <p class="ji">当前积分：0</p>
            </div>
            <a class="exit" @click.prevent="handleLogOut">退出登录</a>
          </div>
        </div>
      </div>

      <div class="box2">
        <div class="list_warp" id="move_boxs">
          <ul class="list">
            <li v-for="(item, index) in nav_mini" :key="index">
              <img :src="item" alt="" />
            </li>
          </ul>
          <div class="btn-prev" @click="prev"></div>
          <div class="btn-next" @click="next"></div>
        </div>
      </div>

      <div class="box3">
        <img src="http://1.117.75.96:8080/goods/m1-box3.jpg" alt="" />
      </div>
    </div>

    <home-list :wares_list="wares_list"></home-list>

    <app-xbox></app-xbox>

    <app-foot></app-foot>
  </div>
</template>

<script>
import $ from 'jquery'
import appSwiper from '../components/appSwiper.vue'
import appHeader from '@/components/appHeader'
import appXbox from '../components/appXbox.vue'
import homeList from '../components/homeList.vue'
import appFoot from '@/components/appFoot'
import { getWares } from '@/api/wares.js'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'Home',
  components: {
    appHeader,
    appSwiper,
    appXbox,
    homeList,
    appFoot
  },
  data() {
    return {
      wares_list: [],
      menu: [],
      nav_mini: [],
      swiper: [],
      isLogin: false,
      list_index: 0
    }
  },
  computed: {
    ...mapGetters(['getToken', 'getUser', 'getCart'])
  },
  methods: {
    ...mapActions(['handleLogOut']),
    async initHome() {
      let {
        data: { data, code, msg }
      } = await getWares()
      if (code == 200) {
        this.wares_list = data.list
        this.menu = data.menu
        this.nav_mini = data.nav_crad
        this.swiper = data.swiper
      } else {
        alert(msg)
      }
    },
    exit() {},
    prev() {
      if (this.list_index - 1 >= 0) {
        $('#move_boxs .list').animate({ left: --this.list_index * -330 }, 200)
      }
    },
    next() {
      if (this.list_index + 1 <= this.nav_mini.length - 4) {
        $('#move_boxs .list').animate({ left: ++this.list_index * -330 }, 200)
      }
    }
  },
  async created() {
    this.initHome()
  }
}
</script>

<style lang="less" scoped>
.position {
  position: relative;
  width: 1226px;
  height: 1px;
  margin: 0 auto;

  .leftBox {
    width: 220px;
    height: 452px;
    position: absolute;
    left: -228px;
    top: 80px;
  }

  .lan {
    position: absolute;
    top: 100px;
    right: -131px;
    width: 120px;

    a {
      position: relative;
      display: block;
      height: 30px;
      line-height: 30px;
      padding-left: 8px;
      color: #696969;
      border-bottom: 1px solid #d5d5d5;
    }
  }
}

.module1 {
  padding: 20px 0 30px;
  width: 100%;
  background: #fafafa;

  .box1 {
    font-size: 0;
    background: #fff;
    color: #333;
    height: 130px;
    box-shadow: 0px 0px 10px 5px rgb(210 210 210 / 75%);
    width: 1226px;
    margin: 0 auto;

    .group1 {
      padding-left: 38px;
      width: 270px;
      border-right: 1px solid #f4f5f5;
      vertical-align: top;
      font-size: 15px;
      height: 100%;
      display: inline-block;

      .title {
        height: 40px;
        font-weight: bold;
        font-size: 16px;
        line-height: 40px;
        padding-top: 1px;

        img {
          vertical-align: top;
          margin-top: 12px;
          width: 15px;
          height: 15px;
          margin-left: 6px;
        }
      }

      .txt {
        display: block;
        margin: 0 11px 10px 0;
        height: 38px;
        line-height: 19px;
        color: #333;
      }

      .tips {
        height: 40px;
        line-height: 40px;
        border-top: 1px solid #f4f5f5;

        span {
          display: inline-block;
          margin-right: 10px;
          vertical-align: top;
          font-size: 14px;

          img {
            width: 15px;
            height: 15px;
            margin-right: 5px;
          }
        }
      }
    }

    .group2 {
      padding: 0 30px;
      width: 520px;
      height: 100%;
      font-size: 0;
      border-right: 1px solid #f4f5f5;
      vertical-align: top;
      display: inline-block;

      a {
        width: 84px;
        margin: 22px 10px;
        display: inline-block;
        vertical-align: middle;

        img {
          display: block;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          margin: 0 auto 10px;
          border: 0 none;
        }

        p {
          text-align: center;
          line-height: 1;
          font-size: 16px;
          color: #333;
          width: auto;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-wrap: normal;
        }
      }
    }

    .group3 {
      position: relative;
      width: 318px;
      vertical-align: top;
      font-size: 15px;
      height: 100%;
      display: inline-block;

      .noLoginbox {
        text-align: center;
        height: 100%;
        overflow: hidden;

        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: block;
          margin: 10px auto 20px;
        }

        .btn {
          font-size: 0;

          a {
            font-size: 16px;
            line-height: 20px;
            display: inline-block;
            vertical-align: middle;
            padding: 0 25px;
          }

          a:last-child {
            border-left: 1px solid #f4f5f5;
          }
        }
      }
    }
  }

  .box2 {
    margin-top: 36px !important;
    height: 220px;
    width: 1226px;
    margin: 0 auto;

    .list_warp {
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      list-style: none;
      padding: 0;
      z-index: 1;

      .list {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        box-sizing: content-box;
        transform: translate3d(0px, 0px, 0px);
        transition-duration: 0ms;

        li {
          margin-right: 6px;
          width: 330px;
          height: 100%;
          flex-shrink: 0;
          position: relative;

          img {
            width: 100%;
            height: 100%;
            cursor: pointer;
          }
        }
      }

      > div {
        width: 26px;
        height: 51px;
        background-size: 26px 51px;
        outline: none;
        position: absolute;
        top: 50%;
        z-index: 10;
        transform: translateY(-50%);
        cursor: pointer;
      }

      .btn-prev {
        pointer-events: auto;
        left: 0;
        background-image: url(http://1.117.75.96:8080/goods/UI/arrow_left.png);
      }

      .btn-next {
        right: 0;
        background: url(http://1.117.75.96:8080/goods/UI/arrow_right.png);
      }
    }
  }

  .box3 {
    width: 1226px;
    margin: 0 auto;

    img {
      width: 100%;
      height: 120px;
    }
  }
}

.loginbox {
  padding: 0 10px 0 75px;
  font-size: 0;
  height: 100%;
  .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 35px 0;
    display: inline-block;
    vertical-align: middle;
  }
  .info {
    width: 153px;
    font-size: 12px;
    line-height: 16px;
    margin-left: 20px;
    padding-bottom: 5px;
    display: inline-block;
    vertical-align: middle;
    .name {
      font-size: 20px;
      line-height: 26px;
      margin-bottom: 6px;
      width: auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-wrap: normal;
    }
  }
  .exit {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 12px;
    display: inline-block;
    line-height: 16px;
    color: #555;
  }
}
</style>
